<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Basket - Fresh foods at your fingertips.</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <!---styles--->
        <link type="text/css" href="/BasketApp/scripts/bootstrap/css/bootstrap_yeti.css" rel="stylesheet">
        <link type="text/css" href="/BasketApp/styles/BasketStyle.css" rel="stylesheet">
<!--        <link type="text/css" href="/BasketApp/styles/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet">-->

        <!----Scripts---->
        <script src="/BasketApp/scripts/jquery-1.10.2.js" type="text/javascript"></script>
<!--        <script src="/BasketApp/scripts/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>-->
        <script src="/BasketApp/scripts/bootstrap/js/bootstrap.js" type='text/javascript'></script>
        <script src="/BasketApp/scripts/handlebars-v1.3.0.js" type="text/javascript"></script>
        <script src="/BasketApp/scripts/jquery.cookie.js" type="text/javascript"></script>
        <script src="/BasketApp/scripts/jquery.validate.js" type="text/javascript"></script>
        <script src="/BasketApp/scripts/jsUtil.js" type="text/javascript"></script>
        <script src='/BasketApp/scripts/bootstrap-paginator.min.js' type='text/javascript'></script>

        <!--------------CUSTOM SCRIPTS-------------->
        <script src="/BasketApp/scripts/listProducts.js" type="text/javascript" ></script>
        <script src="/BasketApp/scripts/productDetails.js" type="text/javascript"></script>
        <!------------END CUSTOM SCRIPTS----------->



    </head>
        <body class="fill" style="position:absolute;width:100%">
        <div id="pageNavigation"></div>
        <div class="container fill" >
            <div class='row fill'>

                <div id="filters" class="col-xs-4" style="padding:10px">

                    <div class="col-xs-5" style="padding:-20px;margin:0px">Results Per Page:</div>
                    <div class="col-xs-3" style="padding: -10p;margin: -5px">
                        <select id="optResultsPerPage" class="form-control">
                            <option value="4">4</option>
                            <option value="8" selected="true">8</option>
                            <option value="12">12</option>
                            <option value="20">20</option>
                        </select>
                    </div>

                </div>
                <div class="col-xs-8">&nbsp;</div>
                <br>
                <br>
                <hr/>
                <div id='content' class="col-xs-12 fill">&nbsp;</div>
            </div>
            <ul id="productPagination"></ul>         

        </div>
        
        
        <!------ shopping cart count callback bind ----->
        <input type="hidden" id="cartCountCallback">
        <!------ shopping cart count callback bind ----->
        

        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" id="modalContent">
                    <div class="modal-body">
                        <center><img src="/BasketApp/images/loading.gif"></center>
                        <center><h1>Loading</h1></center>
                    </div>
                    </div> 
                </div>
            </div>
        
        <script type="text/javascript">
            $(function() {
                
                includes("navbar_template", {}, "#pageNavigation");
                console.log("local javascript started");
                //>>>>>>>mock cookie data<<<<<<<<<<<
                cookieData = {cart: {}, username: "admin"};
                $.cookie("verified", "true");
                $.cookie("cart", JSON.stringify(cookieData));
                //>>>>>>>>>>>>>END<<<<<<<<<<<<<<<<<<
                
                //set shopping cart value                       
                //open product details
                $("#testBtn").click(function(){
                   $("#myModal").modal(); 
                });                
                
                cartCountUpdate();
                
                $("#btnCart").hover(function(){
                    console.log("cart dropdown hover >>>>>>>");                   
                   $(this).dropdown("toggle");
                   $("#btnCart").blur();
                });

            });
        </script>
    </body>
</html>
